<template>
<div style="height: 100%;width: 100%;overflow: hidden">
    

    <div style="width: 400px;height: 300px;background-color: rgba(255, 255, 255, 0.8);border-radius: 10px;margin: 200px auto 0 auto">
        <div class="text" style="color: gray;">
            晴天单机 <span class="vue">游戏盒子</span>
        </div>

        <div style="width: 100%;display: flex;justify-content: center;margin-top: 40px;" v-show='isLogin'>
            <el-form :model="form" label-width="auto">
                <el-form-item label="用户名">
                    <el-input autofocus v-model="form.username" placeholder="会员名称"/>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="form.password" type="password" placeholder="密码"/>
                </el-form-item>

                <!-- <div style="display: flex;justify-content: right;height: 20px;line-height: 20px;width: 100%;margin: 0 auto">
                    <el-link style="margin-right: 0;user-select: none;" type="primary" disabled :underline="false" size="large" @click="forget">忘记密码</el-link>
                </div> -->

                <div style="display: flex;justify-content: center;margin-top: 10px;">
                    <el-form-item>
                        <el-button type="primary" size="large" @click="submitLogin" :disabled="!form.username || !form.password">登 录</el-button>
                        <el-button size="large" @click='isLogin = false'>注 册</el-button>
                    </el-form-item>
                </div>
                
            </el-form>
        </div>

        <div style="width: 100%;display: flex;justify-content: center;margin-top: 40px;" v-show='!isLogin'>
            <el-form :model="form" label-width="auto">
                <el-form-item label="用户名">
                    <el-input autofocus v-model="form.username" placeholder="会员名称"/>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="form.password" type="password" placeholder="密码"/>
                </el-form-item>

                <!-- <el-form-item label="兑换码">
                    <el-input autofocus v-model="form.redeemCode" placeholder="兑换码"/>
                </el-form-item> -->

                <div style="display: flex;justify-content: center;margin-top: 10px;">
                    <el-form-item>
                        <el-button type="primary" size="large" @click="isLogin = true" >登 录</el-button>
                        <el-button size="large"  @click="submitRegister" :disabled="!form.username || !form.password ">注 册</el-button>
                    </el-form-item>
                </div>
                
            </el-form>
        </div>


    </div>

    
</div>

</template>

<script>
import {memberLogin, memberRegister} from '../api/member'

export default {
    name: 'MemberLogin',
    data() {
        return {
            isLogin: true,
            form: {
                username: '',
                password: '',
                redeemCode: ''
            }
        }
    },
    methods: {
        // 忘记密码
        forget() {
            
        },

        // 注册
        submitRegister() {
            memberRegister(this.form).then(resp => {
                this.submitLogin()
            })
        },

        // 登录
        submitLogin() {
            memberLogin(this.form).then(resp => {
                let data = resp.data.data
                localStorage.setItem('token', data.token)
                this.$router.replace("/")
            })

        }
    },
    mounted() {
        
    }
}
</script>

<style scoped>

</style>